<script setup lang="ts">
import { onMounted, ref } from 'vue'
import TnInput from '@tuniao/tnui-vue3-uniapp/components/input/src/input.vue'
import TnButton from '@tuniao/tnui-vue3-uniapp/components/button/src/button.vue'
import { useUserStore } from '@/store/user';
import type { LoginForm } from '@/types'
import { HOME_PAGE } from '@/config'

const userStore = useUserStore()

const form = ref<LoginForm>({
    tenantId: '000000',
    username: '',
    password: ''
} as LoginForm)

const toReg = () => {
    uni.navigateTo({ url: '/pages/index/index' })
}

const handleLogin = async () => {
    if (form.value.username === null || form.value.username === '') {
        uni.showToast({
            icon: 'error',
            title: '用户名不能为空'
        })
    } else if (form.value.password === null || form.value.password === '') {
        uni.showToast({
            icon: 'error',
            title: '密码不能为空'
        })
    } else {
        const success = await userStore.login(form.value)
        if (success) {
            userStore.getUserInfo()
            uni.switchTab({
                url: HOME_PAGE
            })
        }
    }
}

</script>
<template>
    <view class="tn-flex tn-flex-column tn-w-full tn-h-screen tn-type-primary_bg">
        <view class="tn-pt-xl tn-pl-xl">
            <image src="/static/logo.png" style="width: 150px; height: 150px;"></image>
        </view>
        <view class="tn-p-xl tn-flex tn-flex-column">
            <text>欢迎</text>
            <text class="tn-mb-xl tn-text-3xl">登录</text>
        </view>
        <view class="tn-p-xl tn-white_bg login-form-radius tn-flex-grow tn-flex tn-flex-column">
            <view class="tn-mt-xl">
                <TnInput v-model="form.username" underline :border="false" placeholder="请输入用户名" />
            </view>
            <view class="tn-mt-xl tn-mb-xl">
                <TnInput type="password" v-model="form.password" underline :border="false" placeholder="请输入密码" />
            </view>
            <view class="tn-mt-xl">
                <TnButton @click="handleLogin" :debounce="true" shape="round" height="50px" width="100%" size="xl">登录
                </TnButton>
            </view>
            <view class="tn-mt-xl tn-flex tn-flex-center tn-w-full">
                <view class="tn-flex-grow">
                    <hr style="width: 100%;" />
                </view>
                <view class="tn-ml-sm tn-mr-sm">OR</view>
                <view class="tn-flex-grow">
                    <hr style="width: 100%;" />
                </view>
            </view>
            <view class="tn-mt-xl tn-text-center">
                <text>没有账号？<text @click="toReg" class="tn-type-primary_text">注册</text></text>
            </view>
        </view>
    </view>
</template>
<style lang="scss" scoped>
.login-form-radius {
    border-radius: 35px 35px 0 0;
}
</style>